<template>
  <div id="carousel-container">
    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        <!-- <icon name="chart-bar"></icon> -->
      </span>
      <div class="d-flex">
        <span class="fs-xl text mx-2">商品数量</span>
        <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
      </div>
    </div>
    <dv-scroll-board class="scroll-board" :config="config" />
  </div>
</template>

<script>
export default {
  name: 'carousel',
  data () {
    return {
      config: {
        // header: ['品类', '品牌', '商品', '数量', '金额'],
        data: [
          ['化妆品', '海飞丝', '洗发水','1','￥28.90'],
          ['化妆品', '潘婷', '沐浴露','2','￥58.10'],
          ['化妆品', '沙宣', '洗发水','8','￥228.92'],
          ['食品', '乐事', '薯片','1','￥8.90'],
          ['食品', '奥利奥', '奥利奥饼干','1','￥5.20'],
          ['食品', '海飞丝', '洗发水','1','￥28.90'],
          ['护肤品', '妮维雅', '洗面奶','1','￥28.90'],
          ['护肤品', '海飞丝', '洗发水','1','￥28.90'],
          ['护肤品', '海飞丝', '洗发水','1','￥28.90']
        ],
        index: true,
        columnWidth: [30],
        align: ['center'],
        oddRowBGC: '',
        evenRowBGC: ''
      }
    }
  }

}
</script>

<style lang="scss" scoped>
#carousel-container {
  padding: 0.25rem 0.125rem;
  border-radius: 0.0625rem;
  width: 100%;
  height: 100%;

  .text {
    color: #c3cbde;
    font-size: 0.2rem;
  }

  .scroll-board {
    padding: 0.125rem 0.125rem;
    height: 2.5rem;
    min-width: 3.75rem;
    // padding: 0.2rem 0.125rem;
  }
}
</style>